<template>
	<uni-popup :ref="ref" :is-mask-click="false" safe-area>
		<view style="width: 750rpx;height: 100vh;">
			<view class="pass-box">
				<view class="pass-box-head">
					<text class="keyboard-icon key-shanchu" style="position: absolute;font-size: 40rpx;"
						@tap="close"></text>
					<!--   <view class="pass-box-head__title">
                        请输入支付密码
                    </view> -->
				</view>
				<view class="pass-box-center" v-if="title">
					<!-- <view class="pass-box-center__text">
                        {{title}}
                    </view> -->
					<view class="pass-box-center__money" v-if="money">
						<text>{{userInfo.area==2?'$':''}}{{parseFloat(money)}}</text>
					</view>
					<view class="pass-box-center__text mt10">
						{{$t('shop').当前可使用}}：{{curreny=='USD'?'$':''}}{{parseFloat(view_user_money)}}
						<text v-if="curreny=='USD'">(≈{{curreny=='USD'?'':'$'}}{{parseFloat(user_money)}})</text>

					</view>
				</view>
				<view class="pass-box-extend" v-if="$slots.extend">
					<slot name="extend"></slot>
				</view>
				<view class="pass-box-footer" :style="'--digit:'+digit">
					<view v-for="(item,index) in digit" :key="index"
						:style="{width: 'calc(520rpx / '+digit+' - 10rpx)',height: 'calc(520rpx / '+digit+' - 10rpx)'}"
						class="pass-box-footer__passnum">
						<text class="keyboard-icon key-dian" v-if="password[index]"
							style="margin-left: 50%;transform: translateX(-50%);font-size: 76rpx;"></text>
					</view>
				</view>
				<view class="pass-box-center__text tc mt10 pb15" @click="navTo('/pages/setting/setPassword')">
					{{$t('shop').忘记密码}}
				</view>
			</view>
			<view class="keyboard">
				<view v-for="(item,index) in 9" :key="index" hover-class="key-hover" :hover-stay-time="100"
					class="keyboard-key" @tap="keyTap(index+1)">
					{{index+1}}
				</view>
				<view class=""></view>
				<view class="keyboard-key" hover-class="key-hover" :hover-stay-time="100" @tap="keyTap(0)">
					0
				</view>
				<view class="keyboard-key__del" hover-class="key-hover" :hover-stay-time="100" @tap="keyTap('del')">
					<text class="keyboard-icon key-backspace"></text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	function getRandomStr() {
		return Math.random().toString(36).slice(-8)
	}
	export default {
		name: "lyyPassInput",
		props: {
			title: String,
			money: Number,
			view_user_money: Number,
			user_money: Number,
			digit: {
				type: Number,
				default: 6,
				validator(val) {
					return !isNaN(val) && (val >= 4 && val <= 8)
				}
			}
		},
		data() {
			return {
				ref: getRandomStr(),
				password: [],
				curreny: uni.getStorageSync('currency'), //区域

			};
		},
		computed: {
			price() {
				return parseInt(this.money).toFixed(2)
			},
			userInfo() {
				return this.$store.state.userInfo
			},
		},
		watch: {
			password(val) {
				if (val.length == this.digit) {
					this.$emit('confirm', {
						pass: val.join('')
					})
				}
			}
		},
		methods: {
			open() {
				this.$refs[this.ref].open()
			},
			close() {
				this.password = []
				this.$refs[this.ref].close()
				this.$emit('close')
			},
			keyTap(val) {
				let value = val.toString()
				if (value !== 'del') {
					if (this.password.length < this.digit) {
						this.password.push(value)
					}
				} else {
					this.password.pop()
				}
			},
			clear() {
				this.password = []
			}
		}
	}
</script>
<style>
	@font-face {
		font-family: "keyboard";
		/* Project id 3416614 */
		src:
			url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOYAAsAAAAAB4gAAANLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqCMIImATYCJAMQCwoABCAFhGcHSRuvBlFUTmJkX2FThnuRwHYHE4QAIC7eAAI4iFBdNHsBCP8cJA8MEYRj6H2SAoBidMC6qqqKx0LOT23CzWgyhlgi6V5N2z6tjUetMOmO2lW1pO0ll3Y3l80XRzHuhXuMwiEkDottmkYY45xtyxNOnrirQg6wzlcJjmSgm5rbyGLaOULR0GYhodH0Pw2p4k28QRwkqKIl4R065FWYmH1/Kd8lIVwLALT6KKVhKQ3/hA7sAKMBKr0RBiiCHAXZtSfrGoFac3ZM7Zxc3cLatYgbWDfDEAdxcVyTWQQLvE9RkKwWKttOLeKOCtKt9HDb/358tRBIKjJjlf2z4xTePvhwIz9eAPJbrkhA94QKZEytzB6X6r1HpsPYlGm1Za1nrADVqiVGrWv+0Fz8iZ21q8y/PEKWiEpGYT1YIvHMh2pbTvChWV1muYGkhLdC1WHeIXCTQf3+sBBSqkHTrg5tnl3AGS+7XuHtRZjYdqs26IlQfEojIMbQA8ZlKYF1eQolaVZpIcoZxMKwJbOhvGZkuCIrJQmOOsdNoJTAB07LYozY8hiIUKzBfx0xu4d7LYWXLhBiMSD8UKA52PLfv8Ihf0jk/Rpp32OgmleEv/8m8ATGV/apY2CaCbJ09CfQ0tufc+vuO60V/Aae0IZH3YRi6FLTkvEUFKlwDwJ53G1kpIwvK7jK46kQRcNO6WFiAPJiOuS76f6b3ziNn/tD09Z/dQW8f7Q931q0p+oz9QZ/wnLYUrCofkop09vav0vzvSMJtaaDV5+i1ecY1Na6kFCtLUZSpQ9ZtQGuyCZQoc4CKlVbRa1Jx7PrtNGmRanBiBcKodkESaN7yJq9c0X2gQqdvlCp2T9qHcTqcnVGokNDEVOK8QhlohphzeWSRrGKTHpNWVdFRtf5/e7JtFI16NluNnlKDZkhRrT9zGcWKIyq8WSs3aiqFGqjCkrYzpn1huOIso/YiarhkEEijKRQbARJCaUh3AgrETaJKREjdY1kOlWaWcMEdx8zWnKkxpHH5rbgTs1NK+ZKbmn1ZXyMCUgwlBo6WVsnUqkoSJd3KpAEs+U9ItoGxxQSbc32Hql+eiquBmOJEilylKhQTmTUzLe50yTJu7U4SspWU1VkCVlVAAA=') format('woff2');
	}

	.keyboard-icon {
		font-family: "keyboard" !important;
		font-size: inset;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.key-dian:before {
		content: "\e608";
	}

	.key-shanchu:before {
		content: "\e66e";
	}

	.key-backspace:before {
		content: "\e610";
	}

	.key-hover {
		background-color: #e0e0e0 !important;
	}
</style>

<style lang="scss" scoped>
	.pass-box {
		width: 600rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		margin: auto;
		left: 75rpx;
		top: 35%;
		transform: translateY(-50%);
		box-sizing: border-box;
		position: absolute;

		&-head {
			position: relative;
			line-height: 40rpx;

			&__title {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				font-weight: 700;
			}
		}

		&-center {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 40rpx;

			&__text {
				overflow: hidden;
				display: -webkit-box;
				margin-bottom: 10rpx;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			&__money {
				font-weight: 700;
				color: #F23C4B;

				text {
					font-size: 60rpx;
				}
			}
		}

		&-extend {
			border-top: 1px solid #eee;
			padding: 20rpx 0;
		}

		&-footer {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 20rpx;

			&__passnum {
				max-width: 100rpx;
				max-height: 100rpx;
				border-radius: 10rpx;
				background-color: #eee;
				display: flex;
				align-items: center;
			}
		}
	}

	.keyboard {
		position: absolute;
		width: 750rpx;
		bottom: 0;
		bottom: env(safe-area-inset-bottom);
		//margin-bottom: env(safe-area-inset-bottom);
		background-color: #eee;
		display: grid;
		grid: 100rpx / repeat(3, 1fr);
		grid-gap: 1px;

		&-key {
			background-color: #fff;
			line-height: 100rpx;
			text-align: center;
			font-size: 60rpx;

			&__del {
				line-height: 100rpx;
				text-align: center;
				font-size: 60rpx;
			}
		}
	}
</style>